<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div style="display: flex;">
          <div>
            <el-image
                style="height: 40px;width: 40px;margin-top: 10px;"
                :src="url"
                fit="scale-down"
            ></el-image>
          </div>
          <div style="font-size: 30px;color: #4e92b6;
          height: 50px;width: max-content;text-align: center;
          margin-top: 10px; margin-left: auto; margin-right: auto;
          display: inline;
          font-weight: bold;">
            图书管理后台
          </div>
          <div style="position: absolute;height: max-content;width: max-content;
          margin-top: 20px;font-size: 18px;
          right: 30px;">
            <el-button @click="login_out" type="text" style="color: #ff6d6d;font-size: 18px;">
              退出登录
            </el-button>
          </div>
        </div>
      </el-header>

      <el-container>
        <keep-alive>
          <el-aside>
            <el-menu :default-openeds="['1', '1']">
              <el-sub-menu :index="item.index" v-for="item in sideMenu" :key="item.id">
                <template #title>
                  <!--{{`${item.name}(${item.EName})`}}-->
                  {{item.name}}
                </template>
                <el-menu-item-group>
                  <router-link
                      :to="child.query !== undefined
                                ? { path: `${item.path}${child.path}`, query: { query: `${child.query}` } }
                                : { path: `${item.path}${child.path}`}
                             "
                      v-for="child in item.children" :key="child.id">
                    <el-menu-item :index="child.index">
                      <!--{{`${child.name}(${child.EName})`}}-->
                      {{child.name}}
                    </el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-aside>
        </keep-alive>

        <el-main>
            <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {ElMessage} from "element-plus";
import axios from "../../axios/axios";
import store from "../../store/store";
import router from "../../router/router";
import imgUrl from "../../../public/book.svg";
import {onMounted, ref} from "vue";

const url = imgUrl;
let sideMenu = ref([])

onMounted(()=>{
  ifHaveToken();
  getSideMenu();
})

const login_out = ()=>{
  store.commit('REMOVE_INFO');
  router.push("/login");
}
const ifHaveToken = ()=>{
  let token = store.getters.getToken;
  //let token = localStorage.getItem("bookManageToken");
  // console.log(token)
  if (token === null || token === "" || token === "undefined"){
    ElMessage({
      message: '请先登录管理员账号',
      type: 'warning',
    });
    router.push("/login");
  }
}
const getSideMenu = ()=>{
  let sideMenuTemp = []
  axios.get('/menu/side').then(res => {
    let menu = res.data.data
    sideMenu.value = menu
    for (let i =0 ; i < menu.length; i++) {
      let father =  menu[i]
      //console.log(father);
      for (let j =0 ; j < menu[i].children.length; j++) {
        let children =  menu[i].children[j]
        //console.log(children);
        if (children.EName === 'SelfInfo') {
          router.addRoute("Index", {
            path: father.path+children.path,
            name: children.EName,
            component: ()=>import("../home/SelfInfo.vue"),
            props: route => ({ query: route.query.query })
          })
        }else{
          router.addRoute("Index", {
            path: father.path+children.path,
            name: children.EName,
            component: ()=>import("../home/DisplayList.vue"),
            props: route => ({ query: route.query.query })
          })
        }
        router.replace(router.currentRoute.value.fullPath)
      }
    }

  })
  //console.log(router.getRoutes());
}
</script>

<style scoped>

a{
  text-decoration: none;
}
.el-container{
  /*height: 100vh;*/
}
.el-header{
  background-color: #e5dbdb;
}

.el-aside {
  width: 180px;
  min-height: 100vh;
}

.el-main {
  background-color: #e9eef3;
}

.el-sub-menu__title{
  color: #041f2d;
  font-weight: bold;
}
.el-menu-item{
  /*color: #b2b2e5;*/
}
</style>
